<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type {
		FormInstance,
		TabsPaneContext,
	} from 'element-plus'
	import dayjs from 'dayjs'
	import marketApi from '@/api/zhitan/market.ts'
	import productApi from '@/api/zhitan/product.ts'
	import Getshop from './getshop.vue'
	import useUserStore from '@/store/modules/user'
	import BigNumber from 'bignumber.js';

	const userStore : any = useUserStore()
	const dialogVisible : any = ref(false)
	const formRef : any = ref()
	const groupList : any = ref([])
	const infoform : any = ref({})
	const formRules : any = ref({
		name: [{
			required: true,
			message: '请输入优惠券名称',
			trigger: 'blur',
		}],
		day: [{
			required: true,
			message: '请输入有效天数',
			trigger: 'blur',
		}],
		money: [{
			required: true,
			message: '请输入优惠券减免金额',
			trigger: 'blur',
		}],
		product_group_id: [{
			required: true,
			message: '请选择产品分类',
			trigger: 'blur',
		}],
		product_name: [{
			required: true,
			message: '请选择关联产品',
			trigger: 'blur',
		}],
		date: [{
			required: true,
			message: '请选择时段',
			trigger: 'blur',
		}],
	})
	const form : any = ref({})
	const total : any = ref(0)
	const showGetshop : any = ref(false)
	const loadingRef : any = ref(null)
	const paging : any = ref({
		page: 1,
		limit: 10,
	})

	const dataList : any = ref([])// 表格 
	onMounted(() => {
		getList()

	})
	// 产品 分类
	function getcateList() {
		productApi.ProductGroup_list({ page: 1, limit: 1000, status: 1 }).then((res : any) => {
			if (res.code === 0) {
				groupList.value = res.data
			}
		})
	}
	// 分页代码
	function pagChange(e : any) {
		paging.value = Object.assign(paging.value, e)
		getList()
	}

	function getList() {
		marketApi.Coupon_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				dataList.value = res.data
				total.value = res.count
			}
		})
	}
	function modify(row : any, type : any) {
		getcateList()
		if (type === 1) {
			form.value = {
				status: 1,
				type: 1,
				aging_type: 1
			}
		}
		else {
			form.value = JSON.parse(JSON.stringify(row))
			form.value.money = form.value.money / 100
			if (form.value.type === 3) {
				form.value.product_name = form.value.product_info.name
			}
			form.value.date = [form.value.start_time * 1000, (form.value.end_time - 86399) * 1000]
		}
		dialogVisible.value = true
	}

	function removeBatch(row : any) {
		marketApi.Coupon_delete({ id: row.id }).then((res : any) => {
			if (res.code === 0) {
				getList()
				dialogVisible.value = false
				ElMessage({
					type: 'success',
					message: '操作成功',
				})
			}
		})
	}
	function submitForm() {
		formRef.value && formRef.value.validate((valid : any) => {
			if (valid) {
				const money : any = ref(0)
				money.value = new BigNumber(JSON.parse(JSON.stringify(form.value.money))).times(100).toNumber()
				// money.value = form.value.money * 100 
				if (form.value.date && form.value.aging_type === 2) {
					form.value.start_time = form.value.date[0] / 1000
					form.value.end_time = (form.value.date[1] / 1000) + 86399
				}
				console.log(form.value.date, form.value.end_time, 'form.value.date')
				delete form.value.date
				delete form.value.create_time
				marketApi.Coupon_edit({ ...form.value, money: money.value }).then((res : any) => {
					if (res.code === 0) {
						getList()
						dialogVisible.value = false
						ElMessage({
							type: 'success',
							message: '操作成功',
						})
					}
				})
			}
		})
	}
	function handleSuccess(res : any) {
		if (res) {
			form.value.image = res
		}
		else {
			form.value.image = ""
		}
	}
	function changedata(e : any) {
		console.log(e, 'rrowrowrowowrrowrowrowow')
		form.value.product_name = e.name
		form.value.product_id = e.id
		showGetshop.value = false
	}
</script>

<template>
	<div class="absolute-container">
		<!-- <PageHeader>
      <template #title>
        <div class="custom-style">
          <el-segmented v-model="topIndex" :options="topList" class="custom-style">
            <template #default="{ item }">
              <div class="flex flex-col items-center gap-2 p-2">
                <div>
                  <span>{{ item.name }}</span>
                  <span v-if="item.num">({{ item.num }})</span>
                </div>
              </div>
            </template>
          </el-segmented>
        </div>
      </template>
    </PageHeader> -->
		<PageMain style="position: relative;">
			<div class="d-c flex">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="优惠券名称:">
						<el-input v-model="paging.name" clearable placeholder="输入优惠券名称" @clear="paging.name = null" />
					</el-form-item>
					<el-form-item label="状态" style="width: 200px;">
						<el-select v-model="paging.status" clearable placeholder="请选择状态" @clear="paging.status = null">
							<el-option label="正常" value="1" />
							<el-option label="禁用" value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="类型" style="width: 200px;">
						<el-select v-model="paging.type" clearable placeholder="请选择类型" @clear="paging.type = null">
							<el-option label="通用券" value="1" />
							<el-option label="品类券" value="2" />
							<el-option label="产品券" value="3" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList()">
							<template #icon>
								<svg-icon name="ep:search" />
							</template>
							查询
						</el-button>
						<el-button @click="paging = {
                page: 1,
                limit: 10,
              }, getList()">
							重置
						</el-button>
					</el-form-item>
				</el-form>
				<div class="btnbox" v-if="userStore.permissions.includes('marketadd')">
					<el-button type="primary" size="default" @click="modify(null, 1)">
						<template #icon>
							<svg-icon name="ep:plus" />
						</template>
						添加
					</el-button>
				</div>
			</div>
			<el-table :data="dataList" highlight-current-row border height="calc(100vh - 300px)">
				<el-table-column prop="id" label="ID" width="60" align="center" />
				<!-- <el-table-column prop="name" label="封面图" min-width="100" align="center">
					<template #default="{ row: i }">
						<image-preview :src="i.image" :width="60" :height="60" />
					</template>
				</el-table-column> -->
				<el-table-column prop="name" label="优惠券名称" min-width="160" align="left">
					<template #default="{ row: i }">
						<div class="aic flex">
							{{i.name}}
						</div>
					</template>
				</el-table-column>

				<el-table-column prop="type" label="类型" width="120" align="center">
					<template #default="{ row: i }">
						<el-tag type="success" v-if="i.type===1">通用券</el-tag>
						<el-tag type="warning" v-if="i.type===2">品类券</el-tag>
						<el-tag type="primary" v-if="i.type===3">产品券</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="money" label="优惠券减免金额" width="150" align="center">
					<template #default="{ row: i }">
						{{i.money/100}}
					</template>
				</el-table-column>
				<el-table-column prop="money" label="产品分类" width="100" align="center">
					<template #default="{ row: i }">
						{{i.type===2&&i.product_group_info&& i.product_group_info.name?i.product_group_info.name:''}}
					</template>
				</el-table-column>

				<el-table-column prop="money" label="产品" width="100" align="center">
					<template #default="{ row: i }">
						{{i.type===3&&i.product_info&& i.product_info.name?i.product_info.name:''}}
					</template>
				</el-table-column>
				<el-table-column prop="aging_type" label="时效类型" width="100" align="center">
					<template #default="{ row: i }">
						<el-tag type="success" v-if="i.aging_type===1">固定天数</el-tag>
						<el-tag type="warning" v-if="i.aging_type===2">固定时段</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="day" label="有效天数" width="100" align="center">
					<template #default="{ row: i }">
						{{i.aging_type===1?i.day:''}}
					</template>
				</el-table-column>
				<el-table-column prop="start_time" label="有效时段" width="230" align="center">
					<template #default="{ row: i }">
						<div>
							<div v-if="i.aging_type===2">
								{{ dayjs(i.start_time * 1000).format('YYYY-MM-DD') }} 至
								{{ dayjs(i.end_time * 1000).format('YYYY-MM-DD') }}
							</div>
							<div v-else></div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="100" align="center">
					<template #default="{ row }">
						<div v-if="row.status === 1" class="relative flex items-center justify-center">
							<div data-v-7edfc4d9="" class="badge relative mr-2 inline-flex">
								<span
									class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
							</div>
							正常
						</div>
						<div v-else class="relative flex items-center justify-center">
							<div data-v-7edfc4d9="" class="badge downcol relative mr-2 inline-flex">
								<span
									class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
							</div>
							暂停
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" min-width="250" align="left" />
				<el-table-column prop="create_time" label="创建时间" width="180" align="center">
					<template #default="{ row: i }">
						{{ dayjs(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="220" align="center">
					<template #default="scope">
						<el-button type="primary" text @click="modify(scope.row, 2)"
							v-if="userStore.permissions.includes('marketedit')">
							<template #icon>
								<svg-icon name="ep:edit" />
							</template>修改
						</el-button>
						<el-popconfirm title="确定删除吗？" @confirm="removeBatch(scope.row)"
							v-if="userStore.permissions.includes('marketdelete')">
							<template #reference>
								<el-button type="danger" text>
									<template #icon>
										<svg-icon name="ep:delete" />
									</template>删除
								</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<page-compon :page="paging.page" :size="paging.limit" :total="total" style="margin-top: 16px;"
				@pag-change="pagChange" />
		</PageMain>
		<HDialog v-model="dialogVisible" :title="form.id ? '编辑优惠券' : '新增优惠券'" modulewidth="450px">
			<el-form ref="formRef" :model="form" class="px-2" :rules="formRules" label-position="top"
				label-width="100px">
				<!-- <el-form-item label="优惠券封面" prop="image" class="avatar">
					<ImageUpload v-model:url="form.image" :width="686" :notip="true" :height="211"
						@onSuccess="handleSuccess" />
				</el-form-item> -->
				<el-form-item label="优惠券名称：" prop="name">
					<el-input v-model="form.name" size="large" placeholder="请输入优惠券名称" clearable />
				</el-form-item>
				<el-form-item label="时效类型：" prop="aging_type">
					<el-radio-group v-model="form.aging_type">
						<el-radio :value="1">
							固定天数
						</el-radio>
						<el-radio :value="2">
							固定时段
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="有效天数：" prop="day" v-if="form.aging_type===1">
					<el-input-number v-model="form.day" style="width: 100%;" size="large" placeholder="请输入有效天数" :min="0"
						controls-position="right" />
				</el-form-item>
				<el-form-item label="选择时段：" prop="date" v-if="form.aging_type===2">
					<el-date-picker size="large" v-model="form.date" type="daterange" range-separator="至"
						start-placeholder="开始日期" value-format="x" end-placeholder="结束日期" />
				</el-form-item>
				<el-form-item label="优惠券减免金额：" prop="money">
					<el-input-number v-model="form.money" :precision="2" style="width: 100%;" size="large"
						placeholder="请输入优惠券减免金额" :min="0" controls-position="right" />
				</el-form-item>
				<el-form-item label="类型：" prop="type">
					<el-radio-group v-model="form.type">
						<el-radio :value="1">
							通用券
						</el-radio>
						<el-radio :value="2">
							品类券
						</el-radio>
						<el-radio :value="3">
							产品券
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="form.type===2" label="产品分类：" label-width="120px" prop="product_group_id">
					<el-select v-model="form.product_group_id" size="large" placeholder="请选择产品分类" style="width: 100%;">
						<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="关联产品：" prop="product_name" v-if="form.type===3">
					<div @click="showGetshop = true" style="width:100%;">
						<el-input style="width:100%;" v-model="form.product_name" size="large" placeholder="请添加关联产品"
							clearable />
					</div>
				</el-form-item>
				<el-form-item label="优惠券状态：" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio :value="1">
							正常
						</el-radio>
						<el-radio :value="2">
							暂停
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注：" prop="remark">
					<el-input v-model="form.remark" type="textarea" :rows="2" size="large" placeholder="请输入备注（仅平台可见）"
						clearable />
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="fotterbtn">
					<el-button class="cancel" @click="dialogVisible = false, form = {} ">
						取消
					</el-button>
					<el-button type="primary" @click="submitForm">
						保存
					</el-button>
				</div>
			</template>
		</HDialog>
		<Getshop v-if="showGetshop" v-model="showGetshop" :infoform="infoform" @changedata="changedata($event)" />
	</div>
</template>

<style lang="scss" scoped>
	@import "@/assets/styles/tool";

	.avatar {
		:deep(.el-image) {
			width: 100px !important;
			height: 100px !important;
		}

		:deep(.image-slot) {
			width: 100px !important;
			height: 100px !important;
		}

		/* :deep(.el-upload__tip) {
    display: none !important;
  } */
	}

	:deep(.guestBox .el-overlay-dialog) {
		background-color: rgb(255 255 255 / 80%);
	}

	:deep(.guestBox .el-dialog) {
		padding: 24px;
		border-radius: 10px;
	}

	:deep(.guestBox header) {
		padding-left: 16px;
		font-size: 16px;
		font-weight: 550;
		border-bottom: 1px solid #f2f2f2;
	}

	:deep(.guestBox .el-dialog__headerbtn .el-dialog__close) {
		font-size: 20px;
		color: #000;
	}

	.btnbox {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.btnbox>.el-button {
		font-size: 12px;
	}

	.downcol {
		.before\:bg-ui-primary::before {
			background-color: red;
		}

		.bg-ui-primary {
			background-color: red;
		}
	}
</style>